<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增班级实验内容安排')" />
    <th:block th:include="include :: datetimepicker-css" />
    <link th:href="@{/plugins/select2/css/select2.min.css}" rel="stylesheet">
    <style>
        .select2-container .select2-selection--single {
            height: 34px !important;
            border-color: #e5e6e7 !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px !important;
        }
        .help-block {
            color: #ed5565;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-classExperimentProject-add">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">指定课程：</label>
                <div class="col-sm-8">
                    <select name="arrangementId" id="arrangementId" class="form-control select2-single" required>
                        <option value="">请选择课程</option>
                        <option th:each="course:${experimentStandards}"
                                th:value="${course.arrangementId}"
                                th:text="${course.courseName}">
                        </option>
                    </select>
                    <label class="help-block" for="arrangementId"></label>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">关联的班级：</label>
                <div class="col-sm-8">
                    <select name="classId" id="classId" class="form-control select2-single" required>
                        <option value="">请先选择课程</option>
                    </select>
                    <label class="help-block" for="classId"></label>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">关联的实验项目：</label>
                <div class="col-sm-8">
                    <select name="projectId" id="projectId" class="form-control select2-single" required>
                        <option value="">请先选择课程</option>
                    </select>
                    <label class="help-block" for="projectId"></label>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">实验安排周次：</label>
                <div class="col-sm-8">
                    <select name="weekNo" class="form-control" th:with="type=${@dict.getType('sys_week_no_status')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">星期几：</label>
                <div class="col-sm-8">
                    <select name="weekDayNo" class="form-control" th:with="type=${@dict.getType('sys_day_no_status')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">节次：</label>
                <div class="col-sm-8">
                    <select name="sectionNo" class="form-control" th:with="type=${@dict.getType('sys_section_status')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">报告提交截止时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="deadline" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">状态：1-启用，0-停用：</label>
                <div class="col-sm-8">
                    <select name="status" class="form-control" th:with="type=${@dict.getType('sys_start_status')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/plugins/select2/js/select2.min.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "college/classExperimentProject";
    var projectApi = ctx + "college/experimentProject/getProjectsByArrangementId";
    var classApi = ctx + "college/courseClass/getClassesByArrangementId";

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-classExperimentProject-add').serialize());
        }
    }

    $(function() {
        // 初始化课程下拉框
        $("#arrangementId").select2({
            language: "zh-CN",
            width: "100%",
            allowClear: false
        });

        // 初始化实验项目下拉框
        $("#classId").select2({
            language: "zh-CN",
            width: "100%",
            allowClear: false
        });

        // 初始化实验项目下拉框
        $("#projectId").select2({
            language: "zh-CN",
            width: "100%",
            allowClear: false
        });

        // 课程选择联动实验项目
        $("#arrangementId").on("change", function() {
            var arrangementId = $(this).val();
            var $projectSelect = $("#projectId");
            var $classSelect = $("#classId");
            $projectSelect.empty().trigger("change");
            $classSelect.empty().trigger("change");

            if (!arrangementId) {
                $projectSelect.append('<option value="">请先选择课程</option>').trigger("change");
                $classSelect.append('<option value="">请先选择课程</option>').trigger("change");
                return;
            }

            $.get(classApi, { arrangementId: arrangementId }, function(res) {
                if (res.code === 0 && res.data.length > 0) {
                    $classSelect.append('<option value="">请选择班级</option>');
                    $.each(res.data, function(i, project) {
                        $classSelect.append(
                            '<option value="' + project.classId + '">' + project.className + '</option>'
                        );
                    });
                    $projectSelect.trigger("change");
                } else {
                    $projectSelect.append('<option value="">该课程暂无授课班级</option>').trigger("change");
                }
            });

            $.get(projectApi, { arrangementId: arrangementId }, function(res) {
                if (res.code === 0 && res.data.length > 0) {
                    $projectSelect.append('<option value="">请选择实验项目</option>');
                    $.each(res.data, function(i, project) {
                        $projectSelect.append(
                            '<option value="' + project.projectId + '">' + project.projectName + '</option>'
                        );
                    });
                    $projectSelect.trigger("change");
                } else {
                    $projectSelect.append('<option value="">该课程暂无实验项目</option>').trigger("change");
                }
            });


        });

        // 表单验证配置
        $("#form-classExperimentProject-add").validate({
            focusCleanup: true,
            errorPlacement: function(error, element) {
                element.next(".help-block").show().text(error.text());
            },
            rules: {
                arrangementId: { required: true },
                projectId: { required: true },
                classId: { required: true }
            },
            messages: {
                arrangementId: "请选择课程",
                classId: "请选择班级",
                projectId: "请选择实验项目"
            }
        });

        // 日期选择器初始化
        $("input[name='deadline']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    });
</script>
</body>
</html>